<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>全国店面分布</title>
  <!--  引入echarts在线文件-->
  <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
  <script src="js/china.js"></script>

  <!--<script src=require("../src/assets/js/china.js")></script>-->
  <!--
    <script src="https://gallery.echartsjs.com/dep/echarts/map/js/china.js"></script>
  -->

</head>
<body>
<div id="box" style="width:100%; height: 800px;"></div>
<script type="text/javascript">
  // 初始化echarts实例
  var myEcharts = echarts.init(document.getElementById("box"));
  //指定图表的配置项和数据
  var option = {
    title: {  //标题样式
      text: 'Balance Bar 中国',
      x: "center",
      textStyle: {
        fontSize: 18,
        color: "red"
      },
    },
    tooltip: {  //这里设置提示框
      trigger: 'item',  //数据项图形触发
      backgroundColor: "#B0C4DE",  //提示框浮层的背景颜色。
      //字符串模板(地图): {a}（系列名称），{b}（区域名称），{c}（合并数值）,{d}（无）
      formatter: '地区：{b}<br/>门店数量：{c}'
    },
    visualMap: {//视觉映射组件
      top: 'center',
      left: 'left',
      min: 0,
      max: 56,
      text: ['High', 'Low'],
      realtime: true,  //拖拽时，是否实时更新
      calculable: true,  //是否显示拖拽用的手柄
      inRange: {
        // color: [ '#FFE7F4', '#BE3F5E']
        color:['lightskyblue' , 'yellow' , 'orangered']
      }
    },
    series: [
      {
        name: '门店数量',
        type: 'map',
        mapType: 'china',
        roam: false,//是否开启鼠标缩放和平移漫游
        itemStyle: {//地图区域的多边形 图形样式
          normal: {//是图形在默认状态下的样式
            label: {
              show: true,//是否显示标签
              textStyle: {
                color: "black"
              }
            }
          },
          zoom: 1.5,  //地图缩放比例,默认为1
          emphasis: {//是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时
            label: {show: true}
          }
        },
        top: "10%",//组件距离容器的距离
        left: "20%",
        data: [
          {name: '北京', value: 6},
          {name: '天津', value: 17},
          {name: '上海', value: 20},
          {name: '重庆', value: 7},
          {name: '河北', value: 1},
          {name: '河南', value: 19},
          {name: '云南', value: 1},
          {name: '辽宁', value: 15},
          {name: '黑龙江', value: 1},
          {name: '湖南', value: 44},
          {name: '安徽', value: 3},
          {name: '山东', value: 6},
          {name: '新疆', value: 0},
          {name: '江苏', value: 22},
          {name: '浙江', value: 24},
          {name: '江西', value: 23},
          {name: '湖北', value: 54},
          {name: '广西', value: 3},
          {name: '甘肃', value: 0},
          {name: '山西', value: 0},
          {name: '内蒙古', value: 0},
          {name: '陕西', value: 2},
          {name: '吉林', value: 1},
          {name: '福建', value: 41},
          {name: '贵州', value: 3},
          {name: '广东', value: 32},
          {name: '青海', value: 0},
          {name: '西藏', value: 0},
          {name: '四川', value: 11},
          {name: '宁夏', value: 0},
          {name: '海南', value: 0},
          {name: '台湾', value: 0},
          {name: '香港', value: 0},
          {name: '澳门', value: 0}

        ]

      }
    ]
  };
  // 使用刚指定的配置项和数据显示图表。
  myEcharts.setOption(option);
</script>
</body>
</html>
